<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>div+css模拟实现固定表头和首列、尾列（推荐）</title>

  <style>
    .table-container {
      width: 800px;
    }

    .table {
      width: 100%;
      height: 200px;
      overflow: auto;
      background-color: #fff;
    }

    .thead {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .table-thead-fix {
      position: sticky;
      top: 0;
      z-index: 999;
    }

    .thead .cell {
      padding: 6px 0;
      font-size: 14px;
      color: #000;
      font-weight: bold;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #f0f0f0;
      text-align: center;
    }

    .table-cell-fix-left {
      position: sticky;
      left: 0;
    }

    .table-cell-fix-right {
      position: sticky;
      right: 0;
      border-left: 1px solid #ddd;
    }

    .thead .cell:nth-child(1) {
      flex: 0 0 80px;
    }

    .thead .cell:nth-child(2) {
      flex: 0 0 100px;
    }

    .thead .cell:nth-child(3) {
      flex: 0 0 120px;
    }

    .thead .cell:nth-child(4) {
      flex: 0 0 500px;
    }

    .thead .cell:nth-child(5) {
      flex: 0 0 100px;
    }

    .thead .cell:nth-child(6) {
      flex: 0 0 200px;
      border-right: 0;
    }

    .tbody .row {
      display: flex;
      align-items: center;
    }

    .tbody .row .cell {
      padding: 8px 0;
      text-align: center;
      font-size: 12px;
      /* color: #9F9F9F; */
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #fff;
    }

    .tbody .row .cell:nth-child(1) {
      flex: 0 0 80px;
    }

    .tbody .row .cell:nth-child(2) {
      flex: 0 0 100px;
    }

    .tbody .row .cell:nth-child(3) {
      flex: 0 0 120px;
    }

    .tbody .row .cell:nth-child(4) {
      flex: 0 0 500px;
    }

    .tbody .row .cell:nth-child(5) {
      flex: 0 0 100px;
    }

    .tbody .row .cell:nth-child(6) {
      flex: 0 0 200px;
      border-right: 0;
    }

    /* 滚动条宽度 */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #8b8989;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      /* border-radius: 5px; */
      /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      background: #8b8989;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
      /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      /* border-radius: 5px; */
      background: #d2d2d2;
    }
  </style>
</head>

<body>
  <div class="table-container">
    <div class="table">
      <div class="thead table-thead-fix">
        <div class="cell table-cell-fix-left">序号</div>
        <div class="cell">姓名</div>
        <div class="cell">联系方式</div>
        <div class="cell">地址</div>
        <div class="cell">电话</div>
        <div class="cell table-cell-fix-right">时间</div>
      </div>
      <div class="tbody">
        <div class="row">
          <div class="cell table-cell-fix-left">1</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">2</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">3</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">4</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">5</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">6</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">7</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">8</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">9</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">10</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>

      </div>
    </div>
  </div>

</body>

</html>